<template>
    <div class="class-authorization">

        <el-dialog 
            title="角色授权" 
            :visible.sync="newAuthorizationDialog" 
            :close-on-click-modal='false' 
            custom-class="class-dialog">

            <!-- 树数据-->
            <div class="class-tree">
                <el-tree
                :data="newData"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                :empty-text='emptyText'
                >
                </el-tree>
            </div>
            <div class="class-tree-buttons" v-show="data.length !=0 ">
                    <el-button @click="resetChecked">清空</el-button>
                    <el-button @click="setAll">全选</el-button>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="newAuthorizationDialog = false">取 消</el-button>
                <el-button type="primary" @click="addAuthorization">确 定</el-button>
            </span>

        </el-dialog>
    </div>
</template>

<script>
import Api from '@/api/Api'
import Bus from "./Bus";
    export default {
        name: 'Authorization',
        props:{
            data: Array,
            roleId: String,
            authorizationDialog: Boolean
        },
        data () {
            return {
                newData: this.data,
                emptyText: '暂无内容',
                newRoleId: this.roleId,
                newAuthorizationDialog: this.authorizationDialog,
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        watch : {
            data () {
                this.newData = this.data
            },
            roleId () {
                this.newRoleId = this.roleId
            },
            authorizationDialog () {
                this.newAuthorizationDialog = true
            }
        },
        methods: {
            //渲染时执行
            renderContent(h, { node, data, store }) {
                return (
                <span class="custom-tree-node">
                    <span>{node.label}</span>
                </span>);
            }, 
            // 点击授权
            addAuthorization() {
                //开启授权框
                var this_  = this
                this.$confirm('此操作将会修改该角色的权限, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var BreakException= {};
                    //清空数据
                    this.sendData = []
                    //定义获取数据
                    let sendData = this.sendData
                    //定义分割符号
                    const whiffletree = '-'
                    //定义是否存在相同
                    let  repeatableArr = []
                    //获取勾选  
                    let arr = this.$refs.tree.getCheckedKeys();

                    //合拼数组
                    let news =[].concat(this.$refs.tree.getHalfCheckedKeys(),arr)
                    // 整理数据
                    for(let i = 0,leni=news.length; i< leni; i++) {
                        //查看权限
                        if(news[i].length >10){
                            //分割     
                            let arrs = news[i].split(whiffletree);
                            let datas={menuId:arrs[0],permission:arrs[1]}
                            // 是否第一次或者是否存在重复菜单id
                            if(sendData.length === 0 || repeatableArr.indexOf(arrs[0]) === -1){
                            //添加数据
                            let datass={menuId:arrs[0],permissionId:new Array(arrs[1])}
                            sendData.push(datass)
                            repeatableArr.push(arrs[0])
                            }else {
                            //菜单id是否存在相同
                            for(let j = 0,lenj=sendData.length; j< lenj; j++ )
                                if(sendData[j]['menuId'] == datas['menuId']){
                                    //相同就同一菜单中添加权限
                                    sendData[j].permissionId.push(arrs[1])
                                }
                            } 
                        }
                    }
                    // 发起请求
                    if(sendData.length != 0){
                        Bus.$emit('open-v-loading')
                        Api.role.addAuthorization({mp:sendData,roleId: this.roleId}).then(res =>{
                            //关闭弹框
                            this.newAuthorizationDialog = false
                            Bus.$emit('close-v-loading',res.data.msg) 
                        })
                    }else {    
                      this.$message({
                            type: 'error ',
                            message: '网络异常,请稍后重试!'
                        });
                        return 
                    }    
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '授权取消!'
                    });          
                });

            },
            // 勾选全部
            setAll () {
                this.$refs.tree.setCheckedNodes(this.data)
            },
            // 清空勾选
            resetChecked() {
                this.$refs.tree.setCheckedKeys([]);
            } 
        },
        

    }
</script>

<style scoped lang="scss">
.class-authorization{
    padding: 0 10px;
    height: 100%;
    .class-tree{
        height: 250px;
        overflow:auto;
    }
    .class-dialog-button{
        float: right;
    }   
}

</style>